<script setup>
import * as echarts from 'echarts';

const state = reactive({
  chart: null,
  chart2: null,
  chart0: null
})

const deviceAnalyze = ref(null)
const deviceCount = ref(null)
const radarAnalyze = ref(null)


const generatePieOption = (data) => {
  const analyzeData = data.map(item => {
    return {
      name: item.department,
      value: item.count
    }
  })
  console.log(analyzeData)
  return {
    title: {
      text: '资产统计',
      subtext: '单位：台',
      left: 'center'
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        name: '资产占有率',
        type: 'pie',
        radius: '50%',
        data: analyzeData,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }
}

const generateBarOption = (data) => {
  const yOrder = {
    '家具': 0, '办公设备': 1, '电子设备': 2, '通信设备': 3
  }
  const xData = ['空闲', '占用', '故障', '报废'].map((state) => {
    return data.filter(item => item.state === state).sort((a, b) => yOrder[a.category] - yOrder[b.category]).map(item => item.count)
  })
  return {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        // Use axis to trigger tooltip
        type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
      }
    },
    legend: {},
    grid: {
      left: '0%',
      right: '0%',
      bottom: '0%',
      containLabel: true
    },
    xAxis: {
      type: 'value'
    },
    yAxis: {
      type: 'category',
      data: ['家具', '办公设备', '电子设备', '通信设备']
    },
    series: [
      {
        name: '空闲',
        type: 'bar',
        stack: 'total',
        label: {
          show: true
        },
        emphasis: {
          focus: 'series'
        },
        data: xData[0]
      },
      {
        name: '占用',
        type: 'bar',
        stack: 'total',
        label: {
          show: true
        },
        emphasis: {
          focus: 'series'
        },
        data: xData[1]
      },
      {
        name: '故障',
        type: 'bar',
        stack: 'total',
        label: {
          show: true
        },
        emphasis: {
          focus: 'series'
        },
        data: xData[2]
      },
      {
        name: '报废',
        type: 'bar',
        stack: 'total',
        label: {
          show: true
        },
        emphasis: {
          focus: 'series'
        },
        data: xData[3]
      }
    ]
  }
}

const generateRadarOption = (use_data, repair_data) => {
  return {
    title: {
      text: '各类资产维修/使用率',
      textStyle: {
        fontSize: 14
      }
    },
    legend: {
      data: ['借用率', '维修率'],
      orient: 'vertical',
      left:'right'
    },
    radar: {
      // shape: 'circle',
      indicator: [
        { name: '家具', max: 100 },
        { name: '办公设备', max: 100 },
        { name: '电子设备', max: 100 },
        { name: '通信设备', max: 100 },
      ]
    },
    series: [
      {
        name: '维修/使用',
        type: 'radar',
        data: [
          {
            value: use_data.map(item => item.use_rate),
            name: '借用率',
            lineStyle: {
              width: 2
            }
          },
          {
            value: repair_data.map(item => item.use_rate),
            name: '维修率',
            lineStyle: {
              width: 2
            }
          }
        ]
      }
    ]
  }
}

onMounted(async () => {
  const chartDom = deviceAnalyze.value;
  state.chart = echarts.init(chartDom);
  try {
    const res1 = await axiosReq({
      url: "/equipments/department_count/"
      , method: "get"
    })
    state.chart.setOption(generatePieOption(res1.data))
  } catch (error) {
    console.log(error)
  }

  const chartDom2 = deviceCount.value;
  state.chart2 = echarts.init(chartDom2)
  try {
    const res2 = await axiosReq({
      url: '/equipments/category_state_count/',
      method: 'get'
    })
    state.chart2.setOption(generateBarOption(res2.data))
  } catch (error) {
    console.log(error)
  }

  const chartDom0 = radarAnalyze.value;
  state.chart0 = echarts.init(chartDom0)
  const res01 = await axiosReq({
    url: '/borrow_logs/use_rate/',
    method: 'get'
  })
  const res02 = await axiosReq({
    url: '/pre_repair_logs/repair_rate/',
    method: 'get'
  })
  state.chart0.setOption(generateRadarOption(res01.data, res02.data))
})

onBeforeUnmount(() => {
  if (!state.chart) {
    return
  }
  state.chart.dispose()
  state.chart = null

  if (!state.chart2) {
    return
  }
  state.chart2.dispose()
  state.chart2 = null
})



</script>


<template>
  <div>
    <el-row style="height: 40vh;">
      <el-col :span="10" :offset="1">
        <el-card>
          <div style="height: 30vh;">
            <div ref="radarAnalyze" style="width: 80%;height: 100%;" />
          </div>
        </el-card>
      </el-col>
      <el-col :span="10" :offset="1">
        <el-card>
          <div style="height: 30vh;">
            <div ref="deviceAnalyze" style="width: 80%;height: 100%;" />
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row>
      <el-col :offset="1" :span="21">
        <el-card>
          <div style="height: 30vh;">
            <div ref="deviceCount" style="width: 80%;height: 100%;"></div>
          </div>
        </el-card>
      </el-col>
    </el-row>

  </div>
</template>